<template>
  <div
    class="commentmanage-container"
    id="commentmanage-container"
    :class="scroll.isFixed ? 'maxHeight' : ''"
  >
    <div class="ant-spin-container">
      <a-empty style="margin-top: 200px" v-if="isEmpty">
        <p style="color: #b6b6b6">暂无数据</p>
      </a-empty>
      <commentList
        :tabKey="props.tabKey"
        :configData="configData"
        @toDetele="toDetele"
        @checkedClick="checkedClick"
      >
      </commentList>
      <pagination
        :pageSize="pageSize"
        :dataSource="configData.records"
        @selectAll="selectAll"
        @changePage="changePage"
        :isSelect="true"
        :selfChecked="isSelectAll"
        :total="configData.total"
        :isShowPagination="isShowPagination"
        :simple="scroll.isFixed"
        :height="0"
        :showCheckDelete="showCheckDelete"
        :scroll="scroll"
        class="paginations"
        ref="tagBaseTables"
        v-if="configData.total > 0"
      >
      <template #opration>
          <template v-if="props.tabKey === 1 || 2">
            <a-button :disabled="!selectList.length" @click="toDeteleAll" :style="{ 'margin-left': '8px' }">{{ props.tabKey ==1 ? '移除' : '引用' }}</a-button>
          </template>
        </template>
      </pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  nextTick,
  onMounted,
  reactive,
  createVNode,
  ref,
  watch,
} from "vue";
import commentList from "./commentList.vue";
import { dataSourceType, scrollType, configDataType } from "@/type";
import request from "@/api/index";
import { Modal, message, TreeSelectProps } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import pagination from "@/components/pagination/index.vue";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { routerPerm } from "@/utils/common";

//data
const btnPerm = ref<any[]>([]);
const route = useRoute();
const isEmpty = ref<boolean>(false);
const isShowPagination = ref<boolean>(true); // 是否需要配分页器
const showCheckDelete = true; // 是否需要分页器中的自定义
const isSelectAll = ref<boolean>(false);
//props
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  channelId: {
    type: [Number, String],
    default: "",
  },
  params: {
    type: Object,
    default: {
      createTimeStart: null,
      createTimeEnd: null
    },
  },
  tabKey: {
    type: Number,
    default: 1,
  },
  specialId: {
    type: Number,
    default: null
  }
});

let configData = reactive<configDataType>({ total: 0, size: 20, records: [] });
let scroll: scrollType = reactive({ y: "", isFixed: false });
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(20);
let rowSelection = ref<(string | number)[]>([]);
const selectList = ref<any[]>([]);

// 内容列表分页-已引用
const fetchCommentPage = async () => {
  let param = {
    status: 1,	 // 引用状态 0：未引用 1：已引用
    topicId: route.query.id,
    word: props.title,
    channelId: props.channelId,
    createTimeStart: props.params.createTimeStart,
    createTimeEnd:  props.params.createTimeEnd,
    pageNumber: pageCurrent.value,
    pageSize: pageSize.value,
  };
  const data = await request.topicContentPage(param);
  isSelectAll.value = false;
  configData.total = data.total;
  configData.records = data.records.map((item: dataSourceType) => {
    return Object.assign(item, { checked: false });
  });
  isEmpty.value = configData.total === 0 ? true : false;
  nextTick(() => {
    let obj = getTableScroll(117, "commentmanage-container", 40);
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
};
// 内容列表分页-未引用
const fetchCommentReportPage = async () => {
  let param = {
    status: 0,	 // 引用状态 0：未应用 1：应用
    topicId: route.query.id,
    word: props.title,
    channelId: props.channelId,
    createTimeStart: props.params.createTimeStart,
    createTimeEnd:  props.params.createTimeEnd,
    pageNumber: pageCurrent.value,
    pageSize: pageSize.value,
  };
  const data = await request.topicContentPage(param);
  isSelectAll.value = false;
  configData.total = data.total;
  configData.records = data.records.map((item: dataSourceType) => {
    return Object.assign(item, { checked: false });
  });
  isEmpty.value = configData.total === 0 ? true : false;
  nextTick(() => {
    let obj = getTableScroll(117, "commentmanage-container", 40);
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
};

// computed
rowSelection = computed(() => {
  return selectList.value;
});

watch(
  () => props.tabKey,
  (newVal: any, oldVal: any) => {
    if (newVal === 1) {
      fetchCommentPage();
    } else if (newVal === 2) {
      fetchCommentReportPage();
    }
  }
);

//method
//单个选择
const checkedClick = (item: any, index: number) => {
  selectList.value = [];
  configData.records[index].checked = !item.checked;
  nextTick(() => {
    isSelectAll.value = configData.records.every((item: any) => {
      return item.checked == true;
    });

    configData.records.map((item: any) => {
      if (item.checked) {
        selectList.value.push(item.id);
      }
    });
  });
};
// 全选
const selectAll = () => {
  selectList.value = [];
  isSelectAll.value = !isSelectAll.value;
  configData.records.map((item: any) => {
    item.checked = isSelectAll.value;
    if (item.checked) {
      selectList.value.push(item.id);
    }
  });
};

//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
  isSelectAll.value = false;
  selectList.value = [];
  props.tabKey === 1 ? fetchCommentPage() : fetchCommentReportPage();
};

//批量移除 引用
const toDeteleAll = () => {
  Modal.confirm({
    content: `您确定将选中的内容${props.tabKey == 1 ? '移除' : '引用'}`,
    centered: true,
    icon: createVNode("i", {
      class: "iconfont icon-warn warning_ICON",
    }),
    cancelText: "取消",
    okText: "确定",
    onOk: async () => {
      toDetele(selectList.value);
    },
    onCancel() {},
  });
};

//删除 引用
const toDetele = (ids: any[]) => {
  const params = {
    id: props?.specialId,
    contentIds: ids
  }
  request[props.tabKey == 1 ? 'topicRemoveRef' : 'topicAddRef'](params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        props.tabKey == 1 ? fetchCommentPage() : fetchCommentReportPage();
        selectList.value = [];
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

// 将需要的数据和方法暴露给父组件
defineExpose({
  fetchCommentPage, fetchCommentReportPage
})

//onMounted
onMounted(() => {
  btnPerm.value = routerPerm();
  props.tabKey === 1 ? fetchCommentPage() : fetchCommentReportPage();
});
</script>

<style lang="less" scoped>
.maxHeight {
  max-height: calc(100% - 120px) !important;
}

.commentmanage-container {
  height: calc(100% - 120px);
  background-color: #fff;
  border-radius: 2px;
  padding: 16px;

  .header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    ::v-deep(.ant-tabs-tab) {
      padding: 8px 0;
    }

    ::v-deep(
        .ant-tabs-top > .ant-tabs-nav::before,
        .ant-tabs-bottom > .ant-tabs-nav::before,
        .ant-tabs-top > div > .ant-tabs-nav::before,
        .ant-tabs-bottom > div > .ant-tabs-nav::before
      ) {
      border: none;
    }

    .header-right {
      display: flex;
      flex-direction: row;

      .header-select-area {
        width: 104px;
        height: 32px;
      }

      .search-input {
        width: 192px;
        margin-left: 12px;
        border-radius: 2px;
        height: 32px;

        .icon-search {
          font-size: 20px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.45);
        }
      }

      .hight-select {
        margin-left: 8px;
      }
    }
  }

  .single-header {
    justify-content: end;
    border: none;
    background: #fff;
  }

  .content-header {
    border: none;
    background: #fff;
  }
}

.select-content {
  background: rgba(0, 0, 0, 0.02);
  display: flex;
  margin-top: 16px;
  padding: 16px;
  flex-wrap: wrap;

  .select-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 16px;

    .title {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      width: 70px;
    }

    .ant-select {
      flex: 1;
    }

    .ant-picker-range {
      flex: 1;
    }

    .titleSelect {
      width: 100px;
      margin-right: 12px;
    }
  }

  .option-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    margin-top: 16px;

    .reset-btn {
      height: 32px;
    }

    .openorclose {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 16px;
      font-size: 14px;
      line-height: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1f6ded;

      .iconfont {
        margin-left: 4px;
      }
    }
  }
}
</style>
<style>
@media screen and (max-width: 1600px) and (min-width: 1280px) {
  .select-content .select-item {
    width: calc(50% - 8px);
  }

  .select-content .select-item:nth-of-type(2n-1) {
    margin-right: 16px;
  }
}

@media screen and (max-width: 1920px) and (min-width: 1601px) {
  .select-content .select-item {
    width: calc(32.99% - 8px);
  }

  .select-content .select-item:nth-of-type(1) {
    margin-right: 16px;
  }

  .select-content .select-item:nth-of-type(2) {
    margin-right: 16px;
  }
}

@media screen and (max-width: 2560px) and (min-width: 1921px) {
  .select-content .select-item {
    width: calc(25% - 8px);
  }

  .select-content .select-item {
    margin-right: 16px;
  }

  .select-content .select-item:nth-of-type(4) {
    margin-right: 0px;
  }
}
</style>
